<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>绑定手机号</title>
    <link rel="shortcut icon" href="/static/favicon.ico"/>
	<link rel="stylesheet" type="text/css" href="${_front_css}/base_new.css">
    <link rel="stylesheet" type="text/css" href="${_front_css}/library.css">
    <link rel="stylesheet" type="text/css" href="${_front_font}/iconfont.css">
	<link rel="stylesheet" type="text/css" href="${_front_css}/thirdParty.css">
    <script type="text/javascript"  src="${_front_js}/jquery-1.11.1.min.js"></script>
  	<style>
  		.btn{
		    cursor: pointer;
		    width: 150px;
		    height: 41px;
		    border: #4db0c2 1px solid;
		    background: #5dc0d2;
		    color: #fff;
		    border-radius: 3px;
		    -webkit-border-radius: 3px;
		    -moz-border-radius: 3px;
		    -ms-border-radius: 3px;
		    text-align: center;
		    behavior: url(plugIn/PIE.htc);
		    line-height: 25px;  		
  		}
	  	.my_right {
		    width: 1200px;
		    margin: 0 auto;
		    height:559px;
		}
		
		.binding_main{
		    text-align: center;
		    padding: 20px 200px;
		}
		
		.yanzhengma{
		    display: inline-block;
		    position: relative;
		    margin-left: -254px;
		}
  	</style>
</head>

<body>	
    <!-- 头部 开始 -->
    <div id="header">
    	<#include "./base/top.ftl" />
    </div>	
    <div class="content">
       <div id="myAccountMain" class="cnt clearfix layoutMain">
		<div class="my_right">
			<div class="my_title1 ml20 mt10 w1200">
				<div class="my_title_main">
					绑定手机号
				</div>
			</div>
			<div class="w1200 ml20 mt15 pt15 pb15 redius4">
				<div class="page-top">
					<div class="m00 w64 h64 icon_reg"></div>
					<div class="tc f20 mt20">
						系统检测到您暂未绑定手机号<br>
						<span class="f14 dinb lh24 mt10 black-level3">为了您能继续操作，请先绑定手机号</span>
						<form action="#" target="_blank">
							<input type="button" id="btn" value="绑定手机号 " class="mt20 btn btn-large btn-primary">
						</form>
					</div>
				</div>
				<div class="binding_main" style="display:none">
					<form class="userFrom registerform" method="post">
		               <div class="phone clearfix FU">
		                   <label for="phone" class="fl"><em>*</em> 手机号：</label>
		                   <input class="fl" type="text" id="phone" placeholder="请输入手机号" name="phone">
		                   <p class="msg fl"></p>
		               </div>
		               <div class="picCode clearfix FU">
		                   <label for="picCodePhone" class="fl" >
		                   		<em>*</em> 验证码：
		                   	</label>
		                   <input type="text" id="picCodePhone" class="fl code" placeholder="请输入验图片证码" name="captcha">
		                   <span class="yanzhengma">
		                   		<img src="/admin/captcha" id="imgCode" title="点击刷新" width="100px" height="34px" onclick="javascript:this.src='/admin/captcha?'+new Date()*1" style="cursor:pointer">
		                   	</span>
		               </div>
		               <div class="SMSCode clearfix FU">
		                   <label for="SMSCodePhone" class="fl"><em>*</em> 短信验证码：</label>
		                   <input type="text" id="smsCode" class="fl code" placeholder="请输入短信验证码" style="background:none;">
		                   <span class="yanzhengma textCode codeBtn" id="sendCode" style="cursor:pointer">获取验证码</span>
		               </div>
		               <div>
		               	    <input type="button" id="submit_btn" value="提交 " class="mt20 btn btn-large btn-primary">
		               </div>
	               </form>
				</div>				
				<div class="b-t-gray mt30">
					<table id="tab" class="m00 hide mt30" style="display: table;">
						<tbody>
							<tr>
								<td class="black-level3 f12" style="height:30px;line-height: 30px;">
									<p>1.只有绑定手机号才能进行开户操作。</p>
									<p>2.绑定手机号之后才能接收系统及时推送的资金信息</p>
									<p>3.手机号绑定后，如果要更改，请联系客服</p>
								</td>
						</tr>
						</tbody>
					</table>
				</div>
			</div>

		</div>    
    	</div>
   </div>
    <div id="footer">
      <div class="content">      
		<#include "./base/foot.ftl" />
      </div>
    </div>       
</div>
	
<script type="text/javascript" src="${_front_js}/layer/layer.js" ></script>
	<script type="text/javascript">
		
		$("#btn").click(function(){
			$(".page-top").hide();
			$(".binding_main").show();
		}); 
	
		$("#submit_btn").click(function(){
			var phone=$("#phone").val();
			var imgCode=$("#picCodePhone").val();
			var smsCode=$("#smsCode").val();
			$.ajax({
				type: 'POST',
		        url:  '/binding/phone',
		         data: {
					phone:phone,
					captcha:imgCode,
					code:smsCode
		        },
		        async: false,
		        success: function(result) {
		        	if(result.code == -1){
		        		layer.alert(result.msg,function(){window.location.href="/account/info";});
		        	}else{
		        		$("#imgCode").click();
		        		console.log(result.msg);
						layer.alert(result.msg);
		        	}
		        }
		    });			
		})

		$("#sendCode").click(sendSms);
		function sendSms() {
			var phone = $("#phone").val();
			var captcha =$("#picCodePhone").val();
			if(phone == "") {
				layer.alert("手机号不能为空");
				return;
			}
			if(captcha == "") {
				layer.alert("验证码不能为空");
				return;
			}
			$.ajax({
				type: 'POST',
		        url:  '/code/sendSms?type=register',
		        data: {
					phone:phone,
					captcha:captcha
		        },
		        async: false,
		        success: function(result) {
		        	if(result.code == -1){
		        		layer.alert(result.msg);
						$(".textCode").unbind("click",sendSms);//去掉单击事件
						$(".textCode").css("cursor","default");//修改鼠标样式
						time();
		        	}else{
		        		$("#imgCode").click();
						layer.alert(result.msg);
		        	}
		        }
		    });
		}
				
		//计时函数
		var sleep = 60;
		var wait = sleep;
		var timeOut;
		function time() {
			if (wait == 0) {
				clearTimeout(timeOut);
				wait = sleep;
				$(".textCode").text("获取验证码");
				$(".textCode").click(sendSms);//重新绑定函数
				$(".textCode").css("cursor","pointer");//修改鼠标样式
			} else {
				$(".textCode").text(wait + "秒后获取");
				wait--;
				timeOut = setTimeout(function() {
					time();
				}, 1000);
			}
		}
	</script>
</body>
</html>       